<template>
  <div class="login-wrapper" :class="[type === 'phone' ? 'backgroundimg' : '']">
    <img class="backImg" src="../../assets/login/assets-login-bg-white.png" alt="" />
    <!-- <login-header /> -->
    <div class="logo">
      <component :is="getLogo" :class="'tdesign-starter-side-nav-logo-tdesign-logo'" />
    </div>

    <div class="login-container">
      <div class="title-container" v-if="type !== 'qrcode'">
        <h1 class="title margin-no">欢迎使用</h1>
        <h1 class="title">英斯盾数据合规平台</h1>
      </div>
      <div class="title-container" v-else>
        <h1 class="title margin-no">英斯盾数据合规平台</h1>
        <h1 class="title">账号申请</h1>
      </div>
      <login v-if="type === 'login'" style="width: 375px" />
      <register v-else-if="type === 'qrcode'" @registerSuccess="switchType" style="width: 375px" />
      <forget-password v-else-if="type === 'phone'" />
      <!-- <tdesign-setting /> -->
      <div class="switch-container">
        <span class="tip" v-show="type !== 'login'" @click="switchType('login')">返回登录</span>
        <span class="tip" v-show="type === 'login'" @click="switchType('qrcode')">账号申请</span>
        <span class="tip" v-show="type === 'login'" @click="switchType('phone')">忘记密码？</span>
      </div>
      <div class="web-login" v-show="type === 'login'">
        Copyright @ 2021-2022 上海英斯盾信息技术有限公司. All Rights Reserved
      </div>
      <div class="web-register" v-show="type === 'qrcode'">
        Copyright @ 2021-2022 上海英斯盾信息技术有限公司. All Rights Reserved
      </div>
      <div class="web-forget" v-show="type === 'phone'">
        Copyright @ 2021-2022 上海英斯盾信息技术有限公司. All Rights Reserved
      </div>
    </div>
  </div>
</template>
<script>
import Login from './components/Login.vue';
import Register from './components/Register.vue';
import LoginHeader from './components/Header.vue';
import ForgetPassword from './components/ForgetPW.vue';
import LogoFull from '@/assets/logo-full.svg';
// import { prefix } from '@/config/global';
// import TdesignSetting from '@/layouts/setting.vue';

export default {
  name: 'LoginIndex',
  components: {
    LoginHeader,
    Login,
    Register,
    ForgetPassword,
    // TdesignSetting,
  },
  data() {
    return {
      type: 'login',
      isLogin: '',
      // prefix,
    };
  },
  computed: {
    getLogo() {
      return LogoFull;
    },
    // collapsed(){
    //   return this.$store.state.setting.isSidebarCompact;
    // },
  },
  watch: {
    type() {
      if (this.type === 'login') {
        this.isLogin = 'isLoginClass';
      }
    },
  },
  methods: {
    switchType(val) {
      this.type = val;
    },
  },
};
</script>
<style lang="less" scoped>
@import url('./index.less');
.backImg {
  position: fixed;
  width: 1000px;
  height: 400px;
  left: -200px;
}

.logo {
  padding: 16px 0 0 8px;
  width: 200px;
}

.login-container {
  top: 18%;
}

.web-login {
  margin-top: 29vh;
  padding-bottom: 4vh;
  color: rgba(0, 0, 0, 0.4);
}
.web-register {
  margin-top: 4vh;
  padding-bottom: 4vh;
  color: rgba(0, 0, 0, 0.4);
}
.web-forget {
  margin-top: 10.2vh;
  padding-bottom: 4vh;
  color: rgba(0, 0, 0, 0.4);
}
/deep/.tab .t-tabs {
  width: 35vw;
}
.backgroundimg {
  background-image: url('@/assets/assets-login-bg-white.png');
}
</style>
